images watermarking
revision: March 5, 2025
Content
best practices with respect to watermarking
top
Watermarking pictures on a website can help protect these images from unauthorized use. Best practices to consider in this respect are:
-> Use semi-transparent watermarks to avoid obstructing the image.
Watermarking pictures on a webpage can be done in several ways.
use image editing software (pre-processing)
top
watermark images before uploading
If you have control over the images before they are uploaded to the website, you can watermark them using image editing tools or scripts. Follwing steps should be included:
-> use software/tools or online tools to add a watermark to your images before uploading them to your website.
-> add text or a logo as the watermark.
-> save the watermarked images and upload them to your server or webpage.
pros: simple and effective.
cons: time-consuming if you have many images, and the watermark cannot be easily changed later.
automate with scripting (e.g. Python)
You can use Python's Pillow library to automate the process of adding watermarks to multiple images. "Pillow" serves as a comprehensive library for opening, manipulating, and saving many different image file formats.
example
from PIL import Image, ImageDraw, ImageFont
def add_watermark(input_image_path, output_image_path, watermark_text):
# Open the image
img = Image.open(input_image_path).convert("RGBA")
txt = Image.new('RGBA', img.size, (255, 255, 255, 0))
# Create a drawing context
d = ImageDraw.Draw(txt)
# Define font and size
font = ImageFont.truetype("arial.ttf", 40) # Replace with your font file
# Position the watermark
width, height = img.size
textwidth, textheight = d.textsize(watermark_text, font)
x = width - textwidth - 10
y = height - textheight - 10
# Draw the watermark
d.text((x, y), watermark_text, font=font, fill=(255, 255, 255, 128))
# Combine the image and the watermark
watermarked = Image.alpha_composite(img, txt)
watermarked.save(output_image_path, "PNG")
# Example usage
add_watermark("input.jpg", "output.jpg", "Your Watermark Text")
use CSS (overlay watermark)
top
You can overlay a watermark on an image using a "div" or "p" element with text or an image (e.g. a logo) positioned over the image.
example
Watermark
code:
<div class="image-container">
<img src="../images/1.jpg" alt="Your Image" width="500" height="500"/>
<div class="watermark">Your Watermark</div>
</div>
<style>
.image-container { position: relative; display: inline-block; width: 30vw; height: 30vw;}
.watermark {position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%);
font-size: 24px; color: rgba(255, 255, 255, 0.5); /* Semi-transparent text */pointer-events: none;
/* Ensures the watermark doesn't interfere with clicks */}
</style>
Watermark
<div style="position: relative; display: inline-block;">
<img src="../images/2.jpg" alt="Your Image" style="width: 70%;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-100%, -50%); color: white;
font-size: 24px; opacity: 0.5;">
The Watermark
</div>
</div>
<div style="position: relative; display: inline-block;">
<img src="../images/3.jpg" alt="Your Image" style="width: 70%;">
<img src="../images/happy.png" alt="Watermark" style="position: absolute; top: 0; left: 0; width: 10%;
height: 10%; opacity: 0.5;">
</div>
pros : easy to implement and update.
cons : the watermark is not part of the image itself, so it can be removed by disabling CSS or inspecting the page.
use JavaScript (dynamic watermarking)
top
example
code:
<div>
<img src="../images/1.jpg" alt="Your Image" class="watermarked-image" width="500"
height="500">
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll(".watermarked-image");
images.forEach(img => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
ctx.font = "24px Arial";
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.fillText("Your Watermark", 10, img.height - 10);
img.src = canvas.toDataURL();
});
});
</script>
code:
<div>
<img src="../images/2.jpg" alt="Your Image" class="watermarked-image" width="500"
height="500">
</div>
<script>
function addWatermark(imageSrc, watermarkText) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// Add watermark
ctx.font = '40px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.fillText(watermarkText, img.width - 200, img.height - 20);
// Replace the image source with the watermarked version
document.querySelector('img').src = canvas.toDataURL();
};
img.src = imageSrc;
}
// Example usage
addWatermark('image.jpg', 'Your Watermark Text');
</script>
pros : dynamic and flexible.
cons : requires JavaScript, and the watermark is added after the page loads, which may not be secure.
While it's possible to watermark images using JavaScript on the client side, this method is not secure, because users can easily bypass it by viewing the original image.
use server-side scripting (e.g. PHP, Python)
top
dynamically generate watermarked images on the server
If you want to apply watermarks dynamically when users request images, you can use server-side scripting languages like PHP, Node.js, or Python.
using PHP
PHP has built-in support for image manipulation via the GD library.
examples
<?php
$image = imagecreatefromjpeg("your-image.jpg");
$watermark = imagecreatefrompng("watermark.png"); // Load your watermark image
$margin = 10; // Margin from the bottom-right corner
// Get dimensions
$imageWidth = imagesx($image);
$imageHeight = imagesy($image);
$watermarkWidth = imagesx($watermark);
$watermarkHeight = imagesy($watermark);
// Position the watermark
$destX = $imageWidth - $watermarkWidth - $margin;
$destY = $imageHeight - $watermarkHeight - $margin;
// Apply the watermark
imagecopy($image, $watermark, $destX, $destY, 0, 0, $watermarkWidth, $watermarkHeight);
// Output the image
header("Content-Type: image/jpeg");
imagejpeg($image);
// Free up memory
imagedestroy($image);
imagedestroy($watermark);
?>
<?php
function add_watermark($image_path, $watermark_text, $output_path) {
// Load the image
list($width, $height) = getimagesize($image_path);
$image = imagecreatefromjpeg($image_path);
// Set up the font and color
$font_path = 'arial.ttf'; // Path to your font file
$text_color = imagecolorallocatealpha($image, 255, 255, 255, 50); // Semi-transparent white
// Calculate position
$text_box = imagettfbbox(20, 0, $font_path, $watermark_text);
$text_width = abs($text_box[4] - $text_box[0]);
$text_height = abs($text_box[5] - $text_box[1]);
$x = $width - $text_width - 10;
$y = $height - $text_height - 10;
// Add the watermark
imagettftext($image, 20, 0, $x, $y, $text_color, $font_path, $watermark_text);
// Save the watermarked image
imagejpeg($image, $output_path, 90);
imagedestroy($image);
}
// Example usage
add_watermark('input.jpg', 'Your Watermark Text', 'output.jpg');
?>
using Node.js
Node.js can use libraries like "sharp" to manipulate images.
example
<script>
const sharp = require('sharp');
async function addWatermark(inputPath, outputPath, watermarkText) {
const metadata = await sharp(inputPath).metadata();
const { width, height } = metadata;
// Create a canvas for the watermark
const watermark = Buffer.from(
<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
<text x="${width - 200}" y="${height - 20}" font-size="40" fill="rgba(255,255,255,0.5)">
${watermarkText}
</text>
</svg>`
);
// Composite the watermark onto the image
await sharp(inputPath)
.composite([{ input: watermark }])
.toFile(outputPath);
}
// Example usage
addWatermark('input.jpg', 'output.jpg', 'Your Watermark Text');
</script>
pros : secure and permanent.
cons : requires server-side programming knowledge.
use third-party libraries or tools
top
Use libraries like ImageMagick (for server-side) or JavaScript libraries like Fabric.js for dynamic watermarking.
pros : powerful and customizable.
cons : may require additional setup or learning.
add watermark to image in Javascript (in the browser)
top
<!-- (PART A) FILE PICKER -->
<input type="file" id="picker" accept=".jpg, .jpeg, .JPG, .webp, .png, .gif" onchange="watermark()">
<script>
function watermark() {
// (PART B) CREATE FILE READER
let reader = new FileReader();
// (PART C) DRAW WATERMARK
reader.onload = () => {
// (C1) CREATE NEW IMAGE
let img = new Image();
// (C2) DRAW TEXT WATERMARK ON IMAGE LOAD
img.onload = () => {
// (C2-1) CREATE NEW CANVAS
let canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
// (C2-2) DRAW IMAGE ONTO CANVAS
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
// (C2-3) DRAW WATERMARK ONTO CANVAS
ctx.font = "bold 46px Arial";
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillText("Witters", 30, 100);
// (C2-4) CANVAS TO IMAGE FILE
let a = document.createElement("a");
a.download = "watermarked.webp";
a.href = canvas.toDataURL("image/webp", 0.7);
a.click(); a.remove();
};
// (C3) GO!
img.src = reader.result;
};
// (PART D) READ SELECTED FILE
reader.readAsDataURL(document.getElementById("picker").files[0]);
}
</script>
use HTML5 canvas
top
code:
<div>
<img id="sourceImage" src="../images/3.jpg" alt="Source Image" style="display:none;">
<canvas id="canvas"></canvas>
</div>
<script>
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const image = document.getElementById('sourceImage');
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
// Adding Text Watermark
context.font = "30px Arial";
context.fillStyle = "rgba(255, 255, 255, 0.5)";
context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("Your Watermark Text", canvas.width - 10, canvas.height - 10);
// Adding Image Watermark
const watermarkImage = new Image();
watermarkImage.src = 'path/to/watermark.png';
watermarkImage.onload = function() {
context.globalAlpha = 0.5; // Set opacity
context.drawImage(watermarkImage, canvas.width - watermarkImage.width - 10,
canvas.height - watermarkImage.height - 10);
context.globalAlpha = 1.0; // Reset opacity
};
};
</script>
use CSS "::after" pseudo-element
You can use CSS to add a watermark without modifying the HTML structure.
code:
<style>
.watermarked { position: relative; display: inline-block;}
.watermarked::after { content: 'Your Watermark'; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); font-size: 24px; color: white; opacity: 0.5;
pointer-events: none; /* Ensures the watermark doesn't interfere with clicks */}
</style>
<div class="watermarked">
<img src="../images/6.jpg" alt="Your Image" style="width: 100%;">
</div>
watermark pictures in a gallery
top
code:
<div id="gallery">
<img class="image" src="../images/1.jpg" alt="holiday" title="holiday" width="30%" height="auto">
<img class="image" src="../images/2.jpg" alt="holiday" title="holiday" width="30%" height="auto">
<img class="image" src="../images/3.jpg" alt="holiday" title="holiday" width="30%" height="auto">
<img class="image" src="../images/4.jpg" alt="holiday" title="holiday" width="30%" height="auto">
</div>
<style>
#gallery{display: flex; flex-flow: row nowrap; width: 90vw;}
</style>
<script>
function addWatermark(imageElement, watermarkText) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// Set canvas dimensions to match the image
canvas.width = imageElement.width;
canvas.height = imageElement.height;
// Draw the image on the canvas
context.drawImage(imageElement, 0, 0);
// Add watermark text
context.font = '24px Arial';
context.fillStyle = 'rgba(255, 255, 255, 0.5)'; // White with 50% opacity
context.textAlign = 'center';
context.fillText(watermarkText, canvas.width / 6 , canvas.height / 6);
// Replace the image with the watermarked canvas
imageElement.src = canvas.toDataURL();
}
// Apply watermark to all images on the page
document.querySelectorAll('.image').forEach(img => {
addWatermark(img, '© L. Witters');
});
</script>
